<template>
  <div class="detail-nav-bar">
    <nav-bar>
      <div slot="left" class="detail-left" @click="detailBack">
        <img src="~@/assets/img/common/back.svg" alt="">
      </div>
      <div slot="center" class="detail-title">
        <div class="detail-title-item" v-for="(item,index) in titles" :key="index"
             @click="titleItemClick(index)" :class="{'title-item-active': currentIndex === index}">{{ item }}
        </div>
      </div>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from "@/components/component/navBar/NavBar";

export default {
  name: "DetailNavBar",
  data() {
    return {
      titles: ["商品", "参数", "评论", "推荐"],
      currentIndex: 0
    }
  },
  components: {
    NavBar
  },
  methods: {
    detailBack() {
      this.$router.back();
    },
    titleItemClick(index) {
      this.currentIndex = index;
      this.$emit("titleItemClick", index);
    }
  }
}
</script>

<style scoped>
.detail-left {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.detail-title {
  display: flex;
}

.detail-title-item {
  flex: 1;
}

.title-item-active {
  color: var(--color-high-text);
}
</style>